<template>
  <view class="container">
    <view class="title">
        <text>订单详情</text>
    </view>
    <view  class="order-detail">
        <view class="section_one">
			<view class="title_one">
				<text>基本信息</text>
			</view>
			<view class="content_one">
				<view class="item_one">
					<text class="label">订单号：</text>
					<text>{{ tradeNo }}</text>
				</view>
				<view class="item_two">
					<image :src="iteminfo.imageUrl" class="product-image"></image>
					<view class="product-info">
						<view class="box-one">
							<text class="product-name">{{ detailitem.skuName }}</text>
							<text class="product-price">  {{ detailcost.originPrice }} 元</text>
						</view>
						<view class="box-two">
							<text class="product-text">积分兑换</text>
							<text class="product-count">×{{ detailcost.count}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="content_two">
				<view class="section_two">
						<view class="item_two">
							<text class="label">订单下单时间：</text>
							<text>{{ orderDetail.submitTime }}</text>
						</view>
						<view class="item_two">
							<text class="label">订单付款时间：</text>
							<text>{{ orderDetail.paymentTime }}</text>
						</view>
						<view class="item_two">
							<text class="label">订单状态：</text>
							<text>{{ orderDetail.state }}</text>
						</view>
						<view class="item_two">
							<text class="label">收货人姓名：</text>
							<text>{{ orderDetail.consigneeName }}</text>
						</view>
						<view class="item_two">
							<text class="label">手机号：</text>
							<text>{{ orderDetail.consigneePhone }}</text>
						</view>
						<view class="item_two">
							<text class="label">消耗积分：</text>
							<text>{{ detailcost.originPoints }} 积分</text>
						</view>
						<view class="item_two">
							<text class="label">商品实付价格：</text>
							<text>{{ detailcost.originPrice }} 元</text>
						</view>
						<view class="item_two">
							<text class="label">实付总价：</text>
							<text>{{ detailcost.originPrice }} 元</text>
						</view>
						<view class="item_two">
							<text class="label">运费：</text>
							<text>{{ detailcost.freight }} 元</text>
						</view>
				</view>
			</view>
		</view>
    </view>
	<view class="order-other">
		<view class="baozhang">
			<view class="baozhang-text">
				<text class="text-bao">订单服务</text>
				<image class="img-bao" src="../../static/bao.png"></image>
			</view>
			<view class="box-bao">
				<view class="baozhang-item">
					<image class="baozhang-img" src="../../static/baozhang.png"></image>
					<text class="baozhang-text">保护隐私</text>
					<view class="baozhang-box">
						<text class="protect">保护中</text>
					</view>
				</view>
				<view class="baozhang-item">
					<image class="baozhang-img" src="../../static/baozhang.png"></image>
					<text class="baozhang-text">隐藏手机号</text>
					<view class="baozhang-box">
						<text class="protect">保护中</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="con">
		<view class="con-text">
			<text class="textcon">遇到问题？</text>
		</view>
		<view class="con-box">
			<image class="img-con" src="../../static/cons.png"></image>
			<text class="text-con"@click="phone">联系电话: 19510198382</text>
		</view>
	</view>
	<footer class="footer">
		<p>&copy; 2023. All rights reserved.</p>
	</footer>
  </view>
</template>

<script>
	import moment from 'moment';//引入moment依赖
	import md5 from 'js-md5';//引入md5依赖
	import authenticate from '../../utils/authenticate.js';//引入鉴权方法
	let timeStamp = moment(new Date().getTime()).format("YYYY-MM-DD HH:mm:ss");
import {
		checkDetail
	} from '../../api/index.js'; //引入订单详情查询接口
export default {
  data() {
    return {
		tradeNo:'',
        orderDetail: [],
		detailcost:[],
		detailitem:[],
		iteminfo:[],
		
  };
  },
  methods: {
	 
	  getOrderDetail(){
		  const tradeNo = uni.getStorageSync('tradeNo');
		  checkDetail({
			  "parts": "",
			  "tradeNo": this.tradeNo
		  })
		  .then(res => {
		  	this.orderDetail = res.data.data
			this.detailcost = res.data.data.cost
			this.detailitem = res.data.data.item
			this.iteminfo = res.data.data.item.spuInfo
		  	console.log(res.data);
		  })
		  .catch(error => {
		  	console.log(error)
		  })
		  
	  },
	  phone() {
	  	uni.makePhoneCall({
	  		phoneNumber: '19510198382'
	  	}).catch((e) => {
	  	})
	  }
	},
	  onLoad(options) {
	  	console.log(options)
	  	this.tradeNo = options.tradeNo
		this.getOrderDetail()
	  }
}
</script>

<style lang="scss">
.container {
  overflow: hidden;
  font-family: HYQihei 40S;
  position: absolute;
  height: 100%;
  width: 100%;
  top:0;
  left: 0;
  overflow-y: auto;
  background-image: url(https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fa3e25a7e3f031021cdb9/6496b03a54fe0000116b0e3f/16875971508892054901.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
	.title {
		font-size: 42rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		margin-left: 40rpx;
		color: #333;
	}
	.order-detail {
		margin: 15px;
		padding: 0 10px;
		box-shadow: 1px 2px 2px 1px #f8baba;
		border: 1px solid #EBEEF5;
		height: 850rpx;
		border-radius: 10px;
		overflow: hidden;
		background-color: #ffffff;
		.section_one {
			justify-content: center;
			margin: 15px 5px 15px 5px;
			padding: 0 5px;
			box-shadow: 2px 2px 2px 1px #f8baba;
			border: 3px solid #EBEEF5;
			height: 790rpx;
			border-radius: 10px;
			overflow: hidden;
			background-color: #ffffff;
			.title_one {
				color: #B50E03;
				display: block;
				padding-top: 4rpx;
			}
			.content_one {
				margin: 6rpx 4rpx  4rpx;
				height: 260rpx;
				background-color:#ffffff;
				border-radius: 8px;
				box-shadow: 0px 0px 4px 1px #e6454599;
				justify-content: center;
				display: flex;
				flex: 1;
				flex-direction: column;
				.item_one {
					margin-left: 8rpx;
					margin-top: 5rpx;
					padding-top: 2rpx;
				}
				.item_two {
					display: flex;
					align-items: center;
					margin-left: 8rpx;
					margin-top: 4rpx;
					width: 530rpx;
					height: 220rpx;
					
					.product-image {
						margin-top: 3rpx;
						margin-left: 20rpx;
						width: 180rpx;
						height: 180rpx;
						border-radius: 7px;
					}
					.product-info {
						margin: 5rpx 5rpx  5rpx;
						height: 180rpx;
						width: 380rpx;
						
						.box-one{
							justify-content: center;
							display: flex;
							flex: 1;
							
							height: 80rpx;
							width: 300rpx;
							.product-name {
								padding-left: 30rpx;
								color: #B50E03;
								padding-top: 14rpx;
								display: block;
							}
							.product-price {
								padding-top: 14rpx;
								padding-left: 110rpx;
								color: #B50E03;
								display: block;
							}
						}
						.box-two {
							display: flex;
							align-items: center;
							
							height: 100rpx;
							width: 300rpx;
							.product-text {
								padding-left: 26rpx;
								color: #B50E03;
								display: block;
								padding-top: 4rpx;
							}
							.product-count{
								padding-left: 150rpx;
								color: #B50E03;
								display: block;
								padding-top: 4rpx;
							}
						}	
					}
				}
			}
			.content_two {
				margin: 30rpx 4rpx 0px 4rpx;
				height: 420rpx;
				background-color:#ffffff;
				border-radius: 8px;
				box-shadow: 0px 0px 4px 1px #e6454599;
				justify-content: center;
				align-items: center;
				display: flex;
				flex-direction: row;
				.section_two {
					margin-top: 10rpx;
					width: 550rpx;
					height: 400rpx;
					background-color:#ffffff;
					justify-content: flex-start;
					align-items: space-around;
					flex-direction: column;
					.item_two {
					}
				}
			}
		}
	}
	.order-other {
		margin: 15px;
		padding: 0 10px;
		box-shadow: 1px 2px 2px 1px #f8baba;
		border: 1px solid #EBEEF5;
		height: 480rpx;
		border-radius: 10px;
		overflow: hidden;
		background-color: #ffffff;
			.baozhang {
				justify-content: center;
				margin: 10px 5px 15px 5px;
				padding: 0 5px;
				box-shadow: 2px 2px 2px 1px #f8baba;
				border: 3px solid #EBEEF5;
				height: 440rpx;
				border-radius: 10px;
				overflow: hidden;
				background-color: #ffffff;
				.baozhang-text {
					display: flex;
					flex: 1;
				
					.text-bao {
						margin-top: 20rpx;
						margin-left: 20rpx;
						color: #B50E03;
					}
					.img-bao {
						width: 100rpx;
						height: 100rpx;
					}
				}
				.box-bao {
					margin: 6rpx 4rpx  4rpx;
					height: 310rpx;
					background-color:#ffffff;
					border-radius: 8px;
					box-shadow: 0px 0px 4px 1px #e6454599;
					justify-content: center;
					display: flex;
					flex: 1;
					flex-direction: column;
					.baozhang-item {
						margin: 6px;
						height: 120rpx;
						
						border-radius: 16px;
						display: flex;
						align-items: center;
						border-style:double;
						border-color: rgba(117, 112, 109, 0.88);
						.baozhang-img {
							width: 100rpx;
							height: 100rpx;
						}
						.baozhang-text {
							color: rgba(0, 0, 0, 1);
						}
						.baozhang-box {
							background-color: #EBEEF5;
							width: 160rpx;
							height: 60rpx;
							margin: 6rpx 30rpx  4rpx;
							border-radius: 16px;
							border-style:dashed;
							border-color: #f8baba;
							.protect {
								display: flex;
								flex: 1;
								align-items: center;
								justify-content: center;
								color: #B50E03;
							}
						}
					}
				}
			}
		
		}
		.con {
			margin: 15px;
			padding: 0 10px;
			box-shadow: 1px 2px 2px 1px #f8baba;
			border: 1px solid #EBEEF5;
			height: 180rpx;
			border-radius: 10px;
			overflow: hidden;
			background-color: #ffffff;
			.con-text {
				.textcon {
					display: flex;
					flex: 1;
					margin-top: 5rpx;
					margin-left: 30rpx;
					color: #B50E03;
				}
			}
			.con-box {
				margin: 10rpx 4rpx 1rpx 4rpx;
				height: 100rpx;
				background-color:#ffffff;
				border-radius: 8px;
				box-shadow: 0px 0px 4px 1px #e6454599;
				display: flex;
				align-items: center;
				border-style:double;
				border-color: #e6454599;
				.img-con {
					width: 60rpx;
					height: 60rpx;
					margin-left: 20rpx;
					align-items: center;
					
				}
				.text-con {
					margin-left: 30rpx;
					color: rgba(115, 107, 107, 1);
				}
			}
		}
		.footer {
			text-align: center;
			padding: 20rpx 0;
			
			font-size: 14rpx;
		}
}










</style>